<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  props: {
    swiperOptions: {
      type: Object
    }
  },
  mounted () {
    new Swiper('.swiper-container', this.swiperOptions)
  }
}
</script>

<style scoped lang="scss">
  ::v-deep .swiper-pagination{
    text-align: right;
    bottom: 5px;
    left: -8px;
  }

  ::v-deep .swiper-pagination-bullet{
    width: 5px;
    height: 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 1;
  }

  ::v-deep .swiper-pagination-bullet-active{
    background: #fff;
  }
</style>
